<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>打表工具 - 单页面多Frame</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <style>
        body {
            overflow: hidden;
        }
        .sidebar {
            height: 100vh;
            width: 200px;
            background-color: #343a40;
        }
        .sidebar .nav-link {
            color: #fff;
        }
        .sidebar .nav-link.active {
            background-color: #495057;
        }
        .main-content {
            margin-left: 200px;
            padding: 20px;
            height: 100vh;
            overflow-y: auto;
        }
    </style>
</head>
<body>

<div class="d-flex">
    <!-- Sidebar -->
    <div class="sidebar d-flex flex-column p-3">
        <h5 class="text-white">打表工具</h5>
        <hr class="text-white">
        <ul class="nav nav-pills flex-column" id="menu">
            <li class="nav-item">
                <a class="nav-link active" href="#" onclick="showFrame('codeGenFrame')">代码生成</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="showFrame('dataExportFrame')">数据导出</a>
            </li>
        </ul>
    </div>

    <!-- Main Content -->
    <div class="main-content flex-fill">
        <!-- Frame: Code Generation -->
        <div id="codeGenFrame">
            <h3>代码生成</h3>
            <form id="codeGenForm">
                <div class="mb-3">
                    <label class="form-label">原始excel目录:</label>
                    <input type="text" class="form-control" name="input_dir" id="code_generate_input_dir">
                </div>
                <div class="mb-3">
                    <label class="form-label">代目生成根目录:</label>
                    <input type="text" class="form-control" name="code_generate_dir" id="code_generate_dir">
                </div>
                <div class="mb-3">
                    <label class="form-label">代码生成包前缀:</label>
                    <input type="text" class="form-control" name="code_generate_package_prefix" id="code_generate_package_prefix">
                </div>
                <div class="mb-3">
                    <label class="form-label">
                        <input type="checkbox" class="form-check-input" name="code_generate_use_lombok" id="code_generate_use_lombok" value="true" checked> 使用lombok
                    </label>
                </div>
                <div class="mb-3">
                    <label class="form-label">生成结果:</label>
                    <textarea class="form-control" name="code_generate_response"  id="code_generate_response" rows="10"></textarea>
                </div>
                <button type="button" class="btn btn-success" onclick="submitCodeGen()">生成代码</button>
            </form>
        </div>

        <!-- Frame: Data Export -->
        <div id="dataExportFrame" style="display: none;">
            <h3>数据导出</h3>
            <form id="dataExportForm">
                <div class="mb-3">
                    <label class="form-label">原始excel目录:</label>
                    <input type="text" class="form-control" name="input_dir" id="data_export_input_dir">
                </div>
                <div class="mb-3">
                    <label class="form-label">数据导出目录:</label>
                    <input type="text" class="form-control" name="data_export_dir" id="data_export_dir">
                </div>
                <div class="mb-3">
                    <label class="form-label">代码生成包前缀:</label>
                    <input type="text" class="form-control" name="code_generate_package_prefix" id="data_export_package_prefix">
                </div>
                <div class="mb-3">
                    <label class="form-label">导出格式</label>
                    <select class="form-select" name="data_export_type">
                        <option value="json">JSON</option>
                        <option value="xml">XML</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">
                        <input type="checkbox" class="form-check-input" name="export_json_pretty" id="export_json_pretty" value="true" checked> 导出json格式化
                    </label>
                </div>
                <div class="mb-3">
                    <label class="form-label">生成结果:</label>
                    <textarea class="form-control" name="data_export_response"  id="data_export_response" rows="10"></textarea>
                </div>
                <button type="button" class="btn btn-success" onclick="submitExport()">导出数据</button>
            </form>
        </div>
    </div>
</div>

<script>
    function showFrame(frameId) {
        document.getElementById("codeGenFrame").style.display = frameId === 'codeGenFrame' ? 'block' : 'none';
        document.getElementById("dataExportFrame").style.display = frameId === 'dataExportFrame' ? 'block' : 'none';

        const links = document.querySelectorAll(".sidebar .nav-link");
        links.forEach(link => link.classList.remove("active"));
        const target = [...links].find(l => l.getAttribute("onclick").includes(frameId));
        if (target) target.classList.add("active");
    }

    function submitCodeGen() {
        const form = document.getElementById("codeGenForm");
        const data = new FormData(form);

        console.log("生成代码参数：", Object.fromEntries(data.entries()));

        fetch("/cfgtool/code_generate", {
            method: "POST",
            body: data,
        }).then(response => response.json())
            .then(result => {
                console.log("后端返回：", result);
                form.querySelector("[id='code_generate_response']").value = JSON.stringify(result, null, 2);
            })
            .catch(error => {
                console.error("请求出错：", error);
                form.querySelector("[id='code_generate_response']").value = JSON.stringify(error);
            });
    }

    function submitExport() {
        const form = document.getElementById("dataExportForm");
        const data = new FormData(form);
        console.log("导出数据参数：", Object.fromEntries(data.entries()));
        fetch("/cfgtool/data_export", {
            method: "POST",
            body: data,
        }).then(response => response.json())
            .then(result => {
                console.log("后端返回：", result);
                form.querySelector("[id='data_export_response']").value = JSON.stringify(result, null, 2);
            })
            .catch(error => {
                console.error("请求出错：", error);
                form.querySelector("[id='data_export_response']").value = JSON.stringify(error);
            })
    }
</script>

</body>
</html>
